<template>
    <el-dialog :model-value="props.value" title="从父模型中，选择属性" width="1000px" @closed="props.closed">
        <DataGrid
            :auto-load="autoLoad"
            searchPlaceholder="属性名称/标识符"
            show-selection
            @selection-change="val => (selectedList = val)"
            @search="val => (keyword = val)"
            :pagination="false"
        >
            <el-table-column label="序号" prop="id" width="80" />
            <el-table-column label="属性名称" prop="displayName">
                <template #default="{ row }">
                    <el-link type="primary" :underline="false" @click="onViewItem(row)">{{ row.displayName }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="标识符" prop="attributeName" />
            <el-table-column label="属性类型" prop="attributeType">
                <template #default="{ row }">
                    {{ AttributeType[row.attributeType] }}
                </template>
            </el-table-column>
            <el-table-column label="默认值" prop="defaultValue" />
            <el-table-column label="数据类型" prop="typeName">
                <template #default="{ row }">
                    {{ attributeTypeList?.[row.typeName]?.displayName || 'N/A' }}
                </template>
            </el-table-column>
        </DataGrid>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="props.close">取消</el-button>
                <el-button type="primary" @click="run" :loading="loading">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { type PopupBoxProps, showPopupBox } from '@great/utils';
import { modelService } from '@great/services';
import { useRequest } from 'vue-request';
import { type AutoLoadConfig, DataGrid } from '@great/components';
import { AttributeType } from '@/utils/constant.ts';
import AttributeFormModal from './AttributeFormModal.vue';

interface IProps extends PopupBoxProps {
    modelDetail: Record<string, any>;
    attributeTypeList: Record<string, any>;
    callback?: () => void;
}

const props = defineProps<IProps>();
const selectedList = ref<any[]>([]);
const keyword = ref('');

const autoLoad = reactive<AutoLoadConfig>({
    reloadDeps: [keyword],
    onLoad: async () => {
        const res = await modelService.attribute.getListByObjectName(props.modelDetail.objectName);
        return {
            data: res.data.filter(item => {
                if (item.attributeType === 'SYSTEM' || item.inUsed) return false;
                if (!keyword.value) return true;
                return (
                    item.displayName.toLowerCase().indexOf(keyword.value.toLowerCase()) > -1 ||
                    item.attributeName.toLowerCase().indexOf(keyword.value.toLowerCase()) > -1
                );
            })
        };
    }
});

const { run, loading } = useRequest(
    () => {
        return modelService.attribute.addExtends({
            objectName: props.modelDetail.objectName,
            attributeNames: selectedList.value.map(item => item.attributeName)
        });
    },
    {
        manual: true,
        onSuccess() {
            props.close();
            props.callback?.();
        }
    }
);

function onViewItem(row: any) {
    showPopupBox(AttributeFormModal, {
        readOnly: true,
        detail: row,
        attributeTypeList: props.attributeTypeList
    });
}
</script>

<style lang="scss" scoped></style>
